<template>
	<view class="mph100 bf ">
		<view class="pt20 plr30 pb20 flexju">
			<text>推广员信息：</text>
			<!-- <text @click="openFn">查看 <text class="blue">推广</text>
			 记录</text> -->
		</view>
		<!-- 推广员信息 -->
		<view class=" plr30 pb30">
			<view class="mb30 plr30 bf border-r1" style="box-shadow: 2px 2px 2px ;">
				<view class="flex_a ptb30">
					<!-- 左 -->
					<view class="flex1">
						<view class="h50 blue">
							用户名：{{loadLists.userName || '--'}}
						</view>
						<view class="h50 green">
							手机号：{{loadLists.phone || '--'}}<strong></strong>
						</view>
						<!-- <view class="c9">{{ loadLists.ctime || '--' }}</view> -->
					</view>
					<!-- 右 -->
					<view class="">
						<view class="h50 blue">
							推广人数：{{ loadLists.count || '0' }}人
						</view>
						<view class="h50" :class="loadLists.status == 1 ? 'greens' : 'warning'">
							分成金额：{{ loadLists.amount|| 0}}元
						</view>
						<!-- <view class="flex_a green">
							<text class="plr10 c9">￥{{ loadLists.amount }}</text>
						</view> -->
					</view>
				</view>
			</view>
			<view style="text-align: center;font-size: 40upx;color: black;">
				推广码
			</view>
			<view style="width: 100%;text-align: center;height: 700upx;">
				<image :src="loadLists.qrCode" mode="widthFix" style="width: 100%;height: 100%;">
				</image>
			</view>


		</view>

		<!-- 推广记录 -->

		<view class="table_h  plr30 ft26 tac">
			<view class="table_th">
				<view class="table_td  bdr">用户名</view>
				<view class="table_td  bdr">手机号</view>
				<view class="table_td  bdr">创建时间</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="table_w plr30 pb40 tac">
			<view class="table_b" style="margin-bottom: 60upx;">
				<!-- 有推广人员时显示 -->
				<block v-for="(item,index) in loadList" :key="index">
					<view class="table_tr">
						<view class="table_td  bdr">{{ item.userName|| '--' }}</view>
						<view class="table_td  bdr">{{ item.phone || '--' }}</view>
						<view class="table_td  bdr">{{ item.ctime || '--' }}</view>
					</view>
				</block>
				<!-- 没有推广人员时显示 -->
				<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">

					<view class="c9 pt60">您还没有推广人员记录~</view>
				</view>
			</view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		promotionPromotionRecord,
		promotionGetInfo
	} from '@/api/user.js'
	import {
		HOST
	} from '@/config';
	export default {
		data() {
			return {
				showTime: false,
				showss: false,
				loadList: [],
				loadLists: {},
				val: '',
			}
		},
		onShow() {
			console.log('666666', this.userInfo);
			this.loadData()
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo || {}
			},
		},
		methods: {

			async loadData() {
				// 推广员信息
				// const ress = await promotionGetInfo(wx.getStorageSync('PromotionId') || '')
				const ress = await promotionGetInfo(this.userInfo.promotion_id || '')
				this.loadLists = ress.data || {}
				if (this.loadLists) {
					this.loadLists.qrCode = HOST + this.loadLists.qrCode
				} else {
					this.loadLists.qrCode = ''
				}
				console.log('12342123', this.loadLists, this.loadLists.qrCode);
				// 推广记录
				this.showss = true
				const res = await promotionPromotionRecord({
					// promotionId: wx.getStorageSync('PromotionId') || '',
					promotionId: this.userInfo.promotion_id || '',
					pageNum: 1,
					pageSize: 100,
				})
				this.showTime = true
				this.loadList = res.rows || []
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},

			async openFn() {


			},

		}
	}
</script>

<style lang="scss" scoped>
	.select_w {
		position: relative;
		line-height: 58upx;

		.select_icon {
			position: absolute;
			top: 0;
			right: 24upx;
			height: 58upx;
		}
	}

	.blue {
		color: blue;
	}

	.green {
		color: seagreen;
	}

	.greens {
		color: green;
	}

	.flexju {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.qq {
		text-align: center;
	}

	.table_th {
		display: flex;
		word-wrap: break-word;
		background-color: #F4F4F5;

		.table_td {
			display: inline-block;
			width: 33%;
			padding: 20upx 10upx;
		}
	}

	.table_w {
		.table_tr {
			display: flex;
			word-wrap: break-word;

			.table_td {
				display: inline-block;
				width: 33%;
				padding: 15upx 15upx;
			}
		}

		.table_b {
			border-top: none;
		}

		.table_tr {
			border-bottom: 1px solid #e4e7ed;
			font-size: 24upx;
		}

		.table_tr:last-child {
			border: none;
		}
	}
</style>